<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script> </head>

<body>
    <div class="layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
        </div>
        <button class='layui-btn' data-type='tabAdd'>新增选项卡</button>
        <button class='layui-btn' data-type='tabDel'>删除选项卡</button>
    </div>
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var $ = layui.jquery
            var element = layui.element;
            // 事件字典
            var active = {
                tabAdd: function(){
                    element.tabAdd('demo',{
                        title: '新选项卡',
                        content: '新添加的选项卡内容',
                        id: 234
                    });
                },
                tabDel: function(){
                    // 如果demo里面有2个234,2个都一起被删除掉
                    element.tabDelete('demo', 234);
                }
            };
            $('.layui-btn').on('click', function(){
                var othis = $(this);
                type = othis.data('type');
                active[type] ? active[type].call(this, othis):'';
            });
        });
    </script> </body>

</html>